import React from 'react'
import './Header.css'
export default function Header(props) {
  return (
    <div className="todo-header">
      <input
        type="text"
        onKeyDown={(e) => {
          // 先获取用户输入的值
          const value = e.target.value.trim()
          //判断是否按下的是回车键
          // 现在开发流行去花括号化,能少些花括号,尽量少写
          // 如果按下的不是回车键,或输入的内容为空,则return
          if (e.key !== 'Enter' || !value) return
          // 调用方法,让修改redux数据
          props.addTodo(value)
          // 清空输入框
          e.target.value = ''
        }}
      />
    </div>
  )
}
